<template>
  <div>
    <customHeader middleTitle="帮助中心" />
    <div class="sum">
      <h5>问题分类</h5>
      <div class="striping"></div>
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="highlight(item,index)"
          :class="{ highlight: num === index }"
        >
          {{ item.name }}
        </li>
        <!-- <li>聚合码</li>
                <li>贷款</li>
                <li>商户入网</li>
                <li>云商</li> -->

        <div v-for="(item) in list[num].content" :key="item"  @click="description(item)">
          <div class="striping"></div>
          <div >
            <p>{{item}}</p>
            <img src="../../assets/images/jiantou-tb.png" alt="" />
          </div>
        </div>
      </ul>

      <!-- <div>
        <div class="striping"></div>
        <div>
          <p>如何成为同福的一员</p>
          <img src="../../assets/images/jiantou-tb.png" alt="" />
        </div>
      </div>
      <div>
        <div class="striping"></div>
        <div>
          <p>如何成为同福的一员</p>
          <img src="../../assets/images/jiantou-tb.png" alt="" />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import customHeader from "../../components/header/header";
export default {
  name: "support",
  components: { customHeader },
  data() {
    return {
      num: 0,
      list: [
        {
          name: "全部",
          content: [
            "如何称为同福一员1？",
            "如何称为同福一员2？",
            "如何称为同福一员3？",
            "如何称为同福一员4？",
            "如何称为同福一员5？",
          ],
        },
        {
          name: "聚合码",
          content: ["如何称为同福一员2？"],
        },
        {
          name: "贷款",
          content: ["如何称为同福一员3"],
        },
        {
          name: "客户入网",
          content: ["如何称为同福一员4？"],
        },
        {
          name: "云商",
          content: ["如何称为同福一员5？"],
        },
      ],
    };
  },
  methods: {
    description(item) {
        this.$router.push({ path: "/support/problem",query:{item:item} });
    },
    highlight(item,index) {
      this.num = index;
    
    },
  },

};
</script>


<style lang='scss' scoped>
@import "index";
</style>
